import React, { useState, useEffect } from 'react'
import Header from '../../components/Header'
import { SearchBar, WhiteSpace } from 'antd-mobile'
import './Home.less'
import { reqAllGoods, reqGroup, reqNewBanner, reqSeckil } from '../../http/api'
import NewShare from './components/BewShare/NewShare'
import Group from './components/Group/Group'
import NavImg from './components/NavImg/Navimg'
import Seckil from './components/seckil/Seckil'
import AllGoods from './components/AllGoods/AllGoods'
export default function Home(props) {
    // 1.1初始化新人专享轮播图
    const [newlist, setNewList] = useState([])
    // 2.1 初始化万人团轮播图
    const [grouplist, setGroupList] = useState([])
    // 3.1 限时秒杀
    const [seckilList, setSeckilList] = useState([])
    // 4.1 初始化商品分类的数据
    const [goodsList, setGoodsList] = useState([])
    // 5.1 初始化n
    const [n, setN] = useState(0)


    //1.2 一进页面就发请求
    useEffect(() => {
        reqNewBanner().then(res => {
            if (res.data.code === 200) {
                // 1.3 赋值
                setNewList(res.data.list)
            }
        })
        //    2.2 发万人团的情求
        reqGroup().then(res => {
            if (res.data.code === 200) {
                // 2.3 赋值
                setGroupList(res.data.list)
            }
        })
        // 3.2 发起秒杀活动的请求
        reqSeckil().then(res => {
            if (res.data.code === 200) {
                // 3.3修改赋值
                setSeckilList(res.data.list)
            }
        })
        // 4.2发起商品分类的请求
        reqAllGoods().then(res => {
            if (res.data.code === 200) {
                // 4.3 修改赋值
                setGoodsList(res.data.list)
            }
        })


    }, [])
    return (
        <div className="home">
            <Header title="首页"></Header>
            {/*首页搜索 导航 */}
            <div className="nav_logo">
                <SearchBar placeholder="搜索" maxLength={8} />
                <WhiteSpace />
            </div>
            {/* 1.4 传给子组件展示 */}
            {/*新人专享  */}
            {
                newlist.length > 0 ? <NewShare newlist={newlist}></NewShare> : null
            }
            {/* 图片 */}
            <NavImg></NavImg>
            {/* 2.4传给子组件展示 */}
            {/* 万人团 */}
            {
                grouplist.length > 0 ? <Group {...props} grouplist={grouplist}></Group> : null
            }
            {/* 3.4 传给子组件展示 */}
            {/* 限时秒杀 */}
            {
                seckilList.length > 0 ? <Seckil seckillist={seckilList} ></Seckil> : null
            }
            {/* 全部商品 */}
            {
                goodsList.length > 0 ? <AllGoods n={n} setN={(e) => setN(e)} allList={goodsList[n].content}></AllGoods> : null
            }



        </div>
    )
}
